<template>
	<view class="container">
		<navigation-custom :config="config" :scrollTop="scrollTop" @customConduct="customConduct" :scrollMaxHeight="scrollMaxHeight" />
		<view class="order-status-list">
			<view class="order-status-item" v-for="(orderStatus, index) in orderStatusList" :key="index" @tap="selectStatus(index)">
				<text>{{ orderStatus.text }}</text>
			</view>
			<view class="active-bar" :animation="animationBar"></view>
		</view>

		<view class="order-list">
			<view class="order-item" v-for="(order, orderIdx) in orderList" :key="orderIdx" @tap="gotoOrderDetail(order.id)">
				<view class="header">
					<view class="order-no">订单编号：{{ order.orderNo }}</view>
					<view class="status">{{ convertSysOrderStatus(order.orderStatus) }}</view>
				</view>
				<view class="content">
					<view style="display: flex; flex-direction: row; align-items: center">
						<view class="image-list">
							<image
								:src="orderGoods.thumbnail"
								class="thumbnail"
								v-for="(orderGoods, orderGoodsIdx) in order.orderGoodsList.slice(0, 4)"
								:key="orderGoodsIdx"
							/>
						</view>
						<view>
							<text class="iconfont icon-qianwang" style="font-size: 40rpx; color: #6a6a6a"></text>
						</view>
					</view>
					<view class="count">
						<text>共</text>
						<text class="order-num">{{ order.orderGoodsList.length }}</text>
						<text>件商品 实付款：¥</text>
						<text class="pay-price">{{ order.payPrice.toFixed(2) }}</text>
					</view>
					<view class="order-tool">
						<text v-if="order.orderStatus == 1" class="order-tool-item order-tool-item-theme" @tap.stop="navCashDesk(order.id, order.payPrice)">去付款</text>
						<text v-if="order.orderStatus == 2" class="order-tool-item order-tool-item-gray" @tap.stop="handleRefund(order.id)">取消订单</text>
						<text v-if="order.orderStatus == 8 || order.orderStatus == 9" class="order-tool-item order-tool-item-theme" @tap.stop="navConfirmOrder(order.id)">
							再来一单
						</text>
					</view>
				</view>
				<view class="tools"></view>
			</view>
		</view>
	</view>
</template>

<script>
import { listUserOrder } from '@/api/user';
import { getOrderGoods, refundOrder } from '@/api/order';
import orderUtil from '@/utils/order.js';
import { mapGetters } from 'vuex';
export default {
	onLoad(params) {
		this.selectStatus(params.orderStatus);
	},
	data() {
		return {
			config: {
				title: '我的订单'
			},
			animationBar: {},
			currentOrderStatus: 0,
			orderStatusList: [
				{
					text: '全部',
					status: 0
				},
				{
					text: '待付款',
					status: 1
				},
				{
					text: '待收货',
					status: 2
				},
				{
					text: '已完成',
					status: 3
				},
				{
					text: '已取消',
					status: 4
				}
			],
			orderList: [],
			orderGoodsNum: 0
		};
	},
	computed: {
		...mapGetters(['appId'])
	},
	methods: {
		convertSysOrderStatus(status) {
			return orderUtil.convertSysOrderStatus(status);
		},
		selectStatus(orderStatus) {
			const tx = orderStatus * 150;
			this.animationBar = uni.createAnimation({
				duration: 200
			});
			this.animationBar.translateX(tx + 'rpx').step();
			this.currentOrderStatus = orderStatus;
			listUserOrder(orderStatus).then((res) => {
				console.log(res.data);
				this.orderList = res.data;
				// this.orderList.forEach((order) => {
				// 	order.orderStatus = orderUtil.convertSysOrderStatus(order.orderStatus);
				// });
			});
		},
		gotoOrderDetail(orderId) {
			console.log(orderId);
			uni.navigateTo({
				url: '/pages/user/order/order_detail?orderId=' + orderId
			});
		},
		handleRefund(orderId) {
			const params = {
				orderId
			};
			uni.showModal({
				content: '是否确定取消订单，确定后将退款',
				success: async (result) => {
					if (result.confirm) {
						const res = await refundOrder(params, this.appId);
						if (res.code == 200) {
							uni.showToast({
								title: '取消订单成功',
								icon: 'none',
								duration: 2000
							});
							this.selectStatus(this.currentOrderStatus);
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
							this.selectStatus(this.currentOrderStatus);
						}
					}
				}
			});
		},
		navCashDesk(orderId, payPrice) {
			uni.navigateTo({
				url: `/pages/order/cash_desk?orderId=${orderId}&payPrice=${payPrice}`
			});
		},
		navConfirmOrder(orderId) {
			getOrderGoods({ orderId }).then((res) => {
				const orderGoodsList = res.data;
				const goodsList = [];
				for (let og of orderGoodsList) {
					let goods = {
						id: og.goodsId,
						name: og.goodsName,
						spec: og.goodsSpec,
						price: og.goodsPrice,
						num: og.goodsNum,
						specInfo: og.specInfo,
						thumbnail: og.thumbnail
						// commission: og.commission
					};
					goodsList.push(goods);
				}
				uni.navigateTo({
					url: '/pages/order/confirm_order?goodsList=' + JSON.stringify(goodsList)
				});
			});
		}
	}
};
</script>

<style scoped lang="less">
@theme-color: #ff5a14;

.container {
	background-color: #f5f5f5;
}

.order-status-list {
	display: flex;
	flex-direction: row;
	background-color: #fff;
	position: relative;
	font-size: 26rpx;

	.order-status-item {
		flex: 1;
		padding: 25rpx 0;
		color: #646566;
		text-align: center;
	}

	.active-bar {
		position: absolute;
		left: ~'calc(75rpx - 1.5em)';
		bottom: 0;
		background-color: @theme-color;
		width: 3em;
		height: 7rpx;
		border-radius: 10rpx;
	}
}

.order-item {
	margin-top: 15rpx;
	background-color: #fff;

	.header {
		display: flex;
		flex-direction: row;
		padding: 15rpx 15rpx;
		border: 1rpx solid #f5f5f5;
		font-size: 25rpx;

		.order-no {
			flex: 1;
			color: #333333;
		}

		.status {
			color: @theme-color;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		padding: 20rpx 20rpx;

		.image-list {
			display: flex;
			flex-direction: row;
			flex: 1;
			gap: 20rpx;

			.thumbnail {
				width: 120rpx;
				height: 120rpx;
			}
		}

		.count {
			text-align: right;
			font-size: 28rpx;

			.order-num,
			.pay-price {
				font-weight: bold;
				font-size: 30rpx;
			}
		}

		.order-tool {
			display: flex;
			justify-content: flex-end;
			margin-top: 15rpx;
			.order-tool-item {
				padding: 8rpx 30rpx;
				border-radius: 100rpx;
				font-size: 28rpx;
			}
			.order-tool-item-theme {
				border: 1rpx solid @theme-color;
				color: @theme-color;
			}
			.order-tool-item-gray {
				border: 1rpx solid #999999;
				color: #999999;
			}
		}
	}
}
</style>
